/* 1*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#recommendation-section {
    display: flex;
    justify-content: space-between;
    width: 87vw;
}

.recommendation-item {
    width: 20%;
    text-align: center;
}

.recommendation-item img {
    width: 100%;         /* 宽度填满父容器 */
    height: 270px;        /* 高度保持图片的原始比例 */
    object-fit: cover;   /* 保持图片覆盖效果 */
}


.recommendation-item h3 {
    font-size: 14px;
    margin: 5px 0;
}

.recommendation-item p {
    font-size: 12px;
    color: #666;
}

/* 2 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 #new-recommendation-section {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between;
    width: 87vw;
    overflow-y: scroll; /* 允许上下滚动 */
}

.recommendation-item {
    width: 16.66%; /* 每行6个部分 */
    text-align: center;
}

.recommendation-item img {
    width: 100%;         /* 宽度填满父容器 */
    height: 270px;        /* 高度保持图片的原始比例 */
    object-fit: cover;   /* 保持图片覆盖效果 */
}

/* 3 */
#grid-recommendation-section {
    display: flex;
    flex-direction: column; /* 纵向排列每行 */
    width: 87vw; /* 容器宽度适应浏览器宽度 */
}

.row {
    display: flex;
    justify-content: space-between; /* 平均分配间距 */
    width: 100%; /* 每行占满整个宽度 */
}

.horizontal-item {
    display: flex; /* 使用flexbox */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 项目之间的间距 */
}

.text-container {
    display: flex;
    flex-direction: column; /* 纵向排列歌曲名和歌手名 */
    justify-content: center; /* 纵向居中对齐 */
    height: 50px; /* 与图片高度相同 */
    text-align: center; /* 文本居中 */
}



.img-container {
    width: 40%;  
    height: 40px;  
    overflow: hidden;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}


.text-container p {
    font-size: 14px;
    color: #333;
    margin: 0;
}

.text-container span {
    font-size: 12px;
    color: #666;
    margin: 0;
}


<!--按钮样式-->